<template>
  <div class="notic-wrap" style="background-color: #FFFFFF;">
    <!-- <img class="notic-img" src="../../../public/avatar2.jpg" /> -->
    <div class="notice-detail-wrap" style="width: 1000px;margin: 0px auto;">
      <p @click="backTo">通知公告</p>
      <div>
        <h3>{{ infoList.npMessageTitle }}</h3>
        <span>
          <em>发布人:{{ infoList.npSendName }}</em>
          <em>发布日期:{{ infoList.createTime }}</em>
        </span>
        <content>
          {{ infoList.npPublicContent }}
        </content>
        <div class="notice-detail-footer">
          <div class="notice-detail-footer-right">
            <!-- <i>【打印本页】</i> -->
            <i @click="backTo">【关闭窗口】</i>
            <i @click="toTop">【返回顶部】</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  export default {
    name:'BeforeNoticeDetail',
    data(){
      return {
        url: {
          list: '/system/sysNoticePublic/list',
          sysNoticePubliclist: '/system/sysNoticePublic/list'
        },
        infoList: {},
      }
    },
    created() {
      getAction(this.url.list,{id: this.$route.query.id}).then((res) => {
        console.log("---------"+JSON.stringify(res))
        if (res.success) {
          this.infoList = res.result.records[0];
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
      })
    },
    
    methods: {
      backTo(){
        this.$router.go(-1);
        localStorage.setItem("currentPage",1);
      },
      toTop() {
        let that = this;
        // 防止用户频繁点击返回顶部按钮，待返回顶部成功后设置scrollTrigger为初始值
        if (that.scrollTrigger) {
          return;
        }
        // 获取当前距离顶部的数值，设置每次上滑的高度直到滚动到顶部为止
        let scrollTop = this.scrollTop;
        let steep = scrollTop / 2000;
        let timer = setInterval(() => {
          that.scrollTrigger = true;
          // 上滑滚动的速度慢慢加快，第一次走2000/1,然后减去已走的距离，下一次用剩下的距离再减去步进值，步进值也是不断变化，这样速度会越来越快
          scrollTop -= steep;
          // 步进值不改变的话会匀速缓慢上滑，不断增加步进值上滑的距离增加，视觉效果速度变快
          steep += 5;
          if (scrollTop <= 0) {
            clearInterval(timer);
            that.scrollTrigger = false;
          }
          // 由于是加在box上的滚动，直接用window.scrollTop无效，查看了getScrollTop方法滚动的元素，所以加在box上
          that.$refs.box.scrollTop = scrollTop;
        }, 30);
      },
      
    }
  }
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    font-style: SimSun;
    font-weight: Regular;
  }

  .notic-wrap {
    width: 100%;

    img {
      width: 100%;
      height: 400px;
      background: rgba(255, 255, 255, 1);
    }
  }

  .notice-detail-wrap {
    p {
      width: 100%;
      font-size: 14px;
      font-family: SimSun;
      font-weight: 400;
      color: rgba(56, 195, 200, 1);
      line-height: 16px;
      padding: 24px 0px 9px 0px;
      box-sizing: border-box;
      border-bottom: thin solid #EBEEF5;
      cursor: pointer;
    }

    div {
      width: 100%;
      text-align: center;

      h3 {
        width: 100%;
        height: 22px;
        font-size: 24px;
        font-family: SimSun;
        font-weight: 400;
        color: #333333;
        line-height: 16px;
        text-align: center;
        padding: 20px 0px 31px 0px;
        box-sizing: border-box;
      }

      span {
        width: 100%;
        display: block;
        margin-bottom: 19px;

        em {
          width: 167px;
          height: 12px;
          font-size: 12px;
          font-family: SimSun;
          font-weight: 400;
          font-style: normal;
          color: #333333;

          &:first-child {
            margin-right: 20px;
          }
        }
      }

      content {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333333;
        line-height: 25px;
      }
    }
  }

  .notice-detail-footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0px 31px 0px;
  }

  .notice-detail-footer-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    i {
      height: 12px;
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      font-style: normal;
      margin-top: -7px;
    }

    img {
      width: 14px;
      height: 12px;
      margin-left: 10px;
      vertical-align: middle;
    }
  }

  .notice-detail-footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    text-align: right;
    i{
      font-style: normal;
      height:12px;
      font-size:12px;
      font-family:SimSun;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin-left: 25px;
      cursor: pointer;
    }
  }
</style>
